<template>
    <div class="body orderlist" v-if="JSON.stringify(ordertInfo) != '{}'">
        <!-- 订单导航 -->
        <div class="tit-flash-sale p mytit_flash">
            <div class="maleri30">
                <ul class="">
                    <li @click="checkType('')">
                        <a :class="{ red: type == '' }" class="tab_head"
                            >全部订单</a
                        >
                    </li>
                    <li @click="checkType('WAITPAY')">
                        <a :class="{ red: type == 'WAITPAY' }" class="tab_head"
                            >待付款</a
                        >
                    </li>
                    <li @click="checkType('WAITSEND')">
                        <a :class="{ red: type == 'WAITSEND' }" class="tab_head"
                            >待发货</a
                        >
                    </li>
                    <li @click="checkType('WAITRECEIVE')">
                        <a
                            :class="{ red: type == 'WAITRECEIVE' }"
                            class="tab_head"
                            >待收货</a
                        >
                    </li>
                    <li @click="checkType('WAITCCOMMENT')">
                        <a
                            :class="{ red: type == 'WAITCCOMMENT' }"
                            class="tab_head"
                            >已完成</a
                        >
                    </li>
                </ul>
            </div>
        </div>

        <div
            class="nonenothing"
            v-show="ordertInfo.order_list.length == 0 && pageInfo.pageSatus"
        >
            <img src="../../assets/images/nothing.png" />
            <p>暂无商品</p>
            <a @click="$router.push('/shop')">去逛逛</a>
        </div>

        <!-- 订单列表 -->
        <div class="ajax_return" v-show="ordertInfo.order_list.length > 0">
            <div
                class="mypackeg ma-to-20 getmore"
                v-for="(item, index) in ordertInfo.order_list"
                :key="index"
            >
                <div
                    class="packeg p"
                    @click="
                        $router.push({
                            path: '/orderDetial',
                            query: { order_id: item.order_id },
                        })
                    "
                >
                    <div>
                        <div class="fl">
                            <h1><span></span><span class="bgnum"></span></h1>
                            <p class="bgnum">
                                <span>订单编号:</span
                                ><span>{{ item.order_sn }}</span>
                            </p>
                        </div>
                        <div class="fr">
                            <span
                                v-show="
                                    item.order_status == 0 &&
                                    item.shipping_status == 0 &&
                                    item.pay_status == 0
                                "
                                >待支付</span
                            >
                            <span
                                v-show="
                                    item.order_status == 1 &&
                                    item.shipping_status == 0 &&
                                    item.pay_status == 1
                                "
                                >待发货</span
                            >
                            <span
                                v-show="
                                    item.order_status == 1 &&
                                    item.shipping_status == 1 &&
                                    item.pay_status == 1
                                "
                                >待收货</span
                            >
                            <span
                                v-show="
                                    item.order_status == 2 &&
                                    item.shipping_status == 1 &&
                                    item.pay_status == 1
                                "
                                >待评价</span
                            >
                            <span
                                v-show="
                                    item.order_status == 4 &&
                                    item.shipping_status == 0 &&
                                    item.pay_status == 1
                                "
                                >已完成</span
                            >
                            <span v-show="item.order_status == 3">已取消</span>
                        </div>
                    </div>
                </div>
                <div
                    class="shop-mfive p"
                    @click="
                        $router.push({
                            path: '/orderDetial',
                            query: { order_id: item.order_id },
                        })
                    "
                >
                    <div class="maleri30">
                        <div
                            class="sc_list se_sclist paycloseto"
                            v-for="(el, i) in item.order_goods"
                            :key="i"
                        >
                            <a>
                                <div class="shopimg fl">
                                    <img :src="el.img_link" />
                                </div>
                                <div class="deleshow fr">
                                    <div class="deletes">
                                        <span class="similar-product-text">{{
                                            el.goods_name
                                        }}</span>
                                    </div>
                                    <div class="deletes">
                                        <span
                                            class="similar-product-text mt-spt"
                                            >{{ el.spec_key_name }}</span
                                        >
                                    </div>
                                    <div class="qxatten wiconfine">
                                        <p class="weight">
                                            <span>x</span
                                            ><span>{{ el.goods_num }}</span>
                                        </p>
                                    </div>

                                    <div class="prices wiconfine">
                                        <p class="sc_pri">
                                            <span>￥</span
                                            ><span>{{ el.goods_price }}</span>
                                        </p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="shop-rebuy-price p">
                    <div class="maleri30">
                        <span class="price-alln">
                            <span class="threel" id="goodsnum"
                                >共{{ item.count_goods_num }}件商品</span
                            >
                            <span class="red">￥{{ item.goods_price }}</span>
                        </span>
                        <a
                            class="shop-rebuy paysoon"
                            v-show="
                                item.order_status == 0 &&
                                item.shipping_status == 0 &&
                                item.pay_status == 0
                            "
                            @click="
                                payOrderNew(
                                    item.order_id,
                                    item.order_sn,
                                    item.order_amount
                                )
                            "
                            >立即付款</a
                        >
                        <a
                            class="shop-rebuy paysoon"
                            v-show="
                                item.order_status == 1 &&
                                item.shipping_status == 1 &&
                                item.pay_status == 1
                            "
                            @click="orderConfirm(item.order_id)"
                            >确认收货</a
                        >
                        <a
                            class="shop-rebuy"
                            v-show="
                                (item.order_status == 1 &&
                                    item.shipping_status == 0 &&
                                    item.pay_status == 1) ||
                                (item.order_status == 0 &&
                                    item.shipping_status == 0 &&
                                    item.pay_status == 0)
                            "
                            @click="orderCancel(item.order_id, item.pay_status)"
                            >取消订单</a
                        >
                        <a
                            class="shop-rebuy"
                            v-show="
                                item.order_status == 2 &&
                                item.shipping_status == 1 &&
                                item.pay_status == 1
                            "
                            @click="turnDiscuss(item.order_id)"
                            >待评价</a
                        >

                        <!-- <a
                            class="shop-rebuy"
                            v-show="
                                item.order_status == 1 &&
                                item.shipping_status == 1 &&
                                item.pay_status == 1
                            "
                            >申请售后</a
                        > -->
                    </div>
                </div>
            </div>
        </div>

        <OrderCancel
            v-if="orderCancelKey"
            @cancelorderCance="cancelorderCance"
            :order_id="orderCancelorder_id"
        />

        <!-- 分页 -->
        <component
            :is="'Pagination'"
            :pageInfo="pageInfo"
            @pageNext="pageNext"
            @changePageStatus="changePageStatus"
        ></component>

        <!-- <div class="zhanwei"></div> -->
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast, Dialog } from 'vant';
import OrderCancel from '../../components/order/OrderCancel';
export default {
    name: '',
    components: {
        OrderCancel,
    },
    data() {
        return {
            type: '',
            orderCancelKey: false,
            orderCancelorder_id: '',

            ordertInfo: {
                order_list: [],
            },
            // 分页组件信息
            pageInfo: {
                pagingText: '',
                pageNum: 1,
                pageSatus: true,
            },
        };
    },
    computed: {},
    mounted() {
        this.pageInfo.pageSatus = false;
        this.type = this.$route.query.type;
        this.getOrderList(); // 根据type获取订单
    },
    methods: {
        // 分页组件修改状态
        changePageStatus(data) {
            this.pageInfo.pageSatus = data;
        },
        // 分页组件回调
        pageNext(data) {
            this.pageInfo.pageNum = data;
            this.getOrderList(data); // 根据type获取订单
        },
        // 待评价
        turnDiscuss() {
            // console.log(order_id);
        },
        // 确认收获
        orderConfirm(order_id) {
            axiosPost(
                '/api/order/order_confirm',
                {
                    order_id: order_id,
                },
                (res) => {
                    // console.log(res);
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                    if (res.status != 1) {
                        return;
                    }
                    this.pageInfo.pageSatus = false;
                    this.getOrderList(); // 根据type获取订单
                }
            );
        },
        // 取消 待发货的取消订单弹窗
        cancelorderCance(data) {
            this.orderCancelKey = false;
            if (data) {
                this.ordertInfo.order_list = [];
                this.pageInfo.pageSatus = false;
                this.getOrderList(); // 根据type获取订单
            }
        },
        // 取消订单
        orderCancel(order_id, pay_status) {
            // 待发货的取消订单
            if (pay_status == 1) {
                this.orderCancelKey = true;
                this.orderCancelorder_id = order_id;
                return;
            }
            // 待付款的取消订单
            Dialog.confirm({
                title: '',
                message: '确定要取消订单吗？',
            })
                .then(() => {
                    axiosPost(
                        '/api/order/cancel_order',
                        {
                            order_id: order_id,
                        },
                        (res) => {
                            // console.log(res);
                            Toast({
                                message: res.msg,
                                duration: 2000,
                            });
                            if (res.status != 1) {
                                return;
                            }
                            this.ordertInfo.order_list = [];
                            this.pageInfo.pageSatus = false;
                            this.getOrderList(); // 根据type获取订单
                        }
                    );
                })
                .catch(() => {
                    // on cancel
                });
        },
        // 立即付款
        payOrderNew(order_id, order_sn, order_amount) {
            sessionStorage.orderInfo = JSON.stringify({
                order_id: this.encrypt(order_id),
                order_sn: this.encrypt(order_sn),
                order_amount: this.encrypt(order_amount),
                user_money: this.encrypt(this.ordertInfo.user_money),
            });
            this.$router.push('/payOrder');
        },
        // 切换订单类型
        checkType(type) {
            this.type = type;
            this.ordertInfo.order_list = [];
            this.pageInfo.pageSatus = false;
            this.getOrderList(); // 根据type获取订单
        },
        // 获取订单列表
        getOrderList(page = 1, page_size = 10) {
            axiosPost(
                '/api/order/order_list',
                {
                    type: this.type,
                    page: page,
                    page_size: page_size,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }

                    // 分页处理
                    if (
                        res.data.page.current_page == res.data.page.total_page
                    ) {
                        this.pageInfo.pagingText = '没有更多啦！';
                    } else {
                        this.pageInfo.pagingText = '商品加载中...';
                    }
                    this.pageInfo.pageSatus = true;

                    // 数据处理
                    res.data.order_list.forEach((element) => {
                        this.ordertInfo.order_list.push(element);
                    });

                    this.ordertInfo.page = res.data.page;
                    this.ordertInfo.user_money = res.data.user_money;
                }
            );
        },
    },
};
</script>

<style lang="less" scope>
.orderlist {
    .mytit_flash ul li {
        color: #222222;
        width: 20%;
    }
    .mytit_flash ul li .red {
        color: #f23030;
    }
    .classreturn {
        background-color: #ffffff;
        height: 1.88rem;
    }
    .mytit_flash {
        height: 1.98rem;
        border-bottom: 0.02rem solid #e3e3e3;
    }
    .mytit_flash ul li {
        height: 1.98rem;
        line-height: 1.98rem;
        position: relative;
    }
    .mytit_flash ul .red:before {
        content: '';
        width: 1.07rem;
        height: 0.11rem;
        background-color: red;
        display: block;
        position: absolute;
        bottom: 0;
        left: 1rem;
    }
    .mytit_flash ul li a {
        color: #333333;
        font-size: 0.64rem;
    }
    .mypackeg {
        border-bottom: 0.34rem solid #eeeeee;
        margin: 0;
    }
    .packeg {
        height: 1.73rem;
        border-bottom: 0.02rem solid #e3e3e3;
        width: 14.61rem;
        margin: 0 auto;
    }
    .mypackeg .packeg .fl p {
        height: 1.73rem;
        line-height: 1.73rem;
        color: #1c1c1c;
    }
    .packeg .fr span {
        line-height: 1.73rem;
    }
    .paycloseto {
        padding: 0.36rem 0;
    }
    .se_sclist .deleshow .deletes .similar-product-text {
        font-size: 0.55rem;
        color: #1c1c1c;
        height: 0.64rem;
        -webkit-line-clamp: 1;
    }
    .mt-spt {
        margin-top: 0.34rem;
        font-size: 0.47rem !important;
        color: #999999 !important;
    }
    .se_sclist .deleshow .prices .sc_pri {
        margin-top: 0.5rem;
        font-family: 'DIN';
        font-size: 0.55rem;
    }
    .paycloseto .deleshow .qxatten .weight {
        float: right;
    }
    .wiconfine {
        width: 5rem;
    }
    .sc_list .deleshow .weight span {
        font-family: 'DIN';
    }
    .paycloseto .deleshow .qxatten {
        float: right;
    }
    .price-alln {
        width: 50%;
        float: left;
        padding: 0;
        margin: 0;
    }
    .shop-rebuy-price {
        margin: 0;
        height: 2.07rem;
        line-height: 2.07rem;
    }
    .price-alln .red {
        font-family: 'DIN';
    }
    .price-alln .threel {
        margin: 0;
        margin-right: 0.62rem;
    }
    .shop-rebuy {
        width: 3.2rem;
        height: 1.19rem;
        font-size: 0.55rem;
        line-height: 1.19rem;
        padding: 0;
        text-align: center;
        margin-top: 0.45rem;
        margin-right: 0;
        margin-left: 0.4rem;
    }
    .buttondde {
        position: static;
        float: right;
        padding-top: 0.6rem;
    }
    .buttondde .afas {
        padding-left: 0.5rem;
    }
}
</style>
